<template>
	<view class="pice">
		<scroll-view class="left scroll-view-left" scroll-y scroll-with-animation :scroll-top="scrollTop">
			<view :class="active == index ? 'leftactive' : ''" class="list-col-left" v-for="(item,index) in godslist" :key="index"
			 @tap="btn(index)">{{item.cat_name}}</view>
		</scroll-view>


		<scroll-view class="right scroll-view-right" scroll-y scroll-with-animation :scroll-top="scrollTRop" @scroll="scrollRight">
			<view v-for="(item,index) in godslist" :key="index">
					<view class="right_titel list-col-right">{{item.cat_name}}</view>
					<view v-for="(item2,in2) in item.children" :key="in2">
						<image @click="previmg" src="https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg" class="rightimg"></image>
					<!-- 	<view>{{item2.cat_name}}</view> -->
					</view>
				
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				godslist: [],
				active: 0,
				scrollTop: 0,
				scrollTRop: 0,
				windowHeight: 0,
				scrollViewHeight: 0,
				scrollRightTop: [],


			}
		},
		onLoad() {
			let that = this;
			that.godslist = uni.getStorageSync('GoodsList');
			console.log(that.godslist)
			uni.getSystemInfo({
				success(res) {
					that.windowHeight = res.windowHeight
				}
			})
		},
		onShow() {
			let that = this;
			let info = uni.createSelectorQuery();
			let query = uni.createSelectorQuery();

			// 在电脑上运行测试加了setTimeout  小程序中不需要 理论上H5也不需要加setTimeout
			setTimeout(() => {
				// 获取左边每个scroll-view的高度
				info.select(".scroll-view-left").boundingClientRect(function(data) {
					that.scrollViewHeight = data.height
				}).exec()

				// 获取右边scroll-view每个内容里顶部的距离
				query.selectAll('.list-col-right').boundingClientRect()
				query.exec(function(res) {
					for (var i = 0; i < that.godslist.length; i++) {
						// 放入到一个数组内
						that.scrollRightTop.push(res[0][i].top)
					}
				})
			}, 1000)
		},
		methods: {
			
			//预览图片
			previmg(){
				 uni.previewImage({
					 current:'https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg',
					 urls:['https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg']
				 })
			},
			// 左边点击事件 滚动
			btn(index) {
				let that = this
				let query = uni.createSelectorQuery();
				query.selectAll('.list-col-left').boundingClientRect()
				query.exec(function(res) {
					let scrollTop = res[0][index].top
					if (that.active != 0 && that.active > index) {
						that.scrollTop = res[0][index].height * index - (that.active - index) * res[0][index].height
					} else {
						that.scrollTop = res[0][index].height * index
					}
					// 右边滚动到相应位置
					// if (that.show) {
					that.scrollTRop = that.scrollRightTop[index]
					// }
					// 记录是否往会滚的索引
					that.active = index;
				})
			},
			// 右边滚动事件
			scrollRight(event) {
				let that = this
				// that.show = false
				// that.scrollTopRg = Math.random();
				// 滚动的时候取消右边滚动scrollTopRg
				// console.log(event.detail.scrollTop)
				let scrollTop = event.detail.scrollTop
				// 左边相应的滚动方法
				let index = that.scrollRightTop.findIndex((item, index) => {
					return scrollTop  >= that.scrollRightTop[index] && scrollTop  < that.scrollRightTop[
						index + 1]
				})
				 index > 0 ? that.btn(index) : that.btn(0)
				// that.btn(index)
			},


		}
	}
</script>

<style scoped>
	page {
		height: 100vh;
	}

	.pice {
		height: 100vh;
		display: flex;
	}

	.left {
		width: 200rpx;
		height: 98vh;
		border-right: 1px solid #eee;
		text-align: center;

	}

	.left view {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		border-top: 1px solid #eee;
	}

	.leftactive {
		background: #B50E03;
		color: #fff;
	}

	.right {
		width: calc(750rpx - 200rpx);
		height: 98vh;
	}

	.right_titel {
		height: 50rpx;
		line-height: 50rpx;
	}

	.rightimg {
		width: 500rpx;
		height: 240rpx;
		padding: 10rpx 0;
	}
</style>
